<template>
  <div>
    <div class="semUploadBox">
      <div v-if="isDoneSelectSem" class="ExpertsShow">
        <!-- 单个不可编辑的专家box -->
        <div v-for="(item, index) in editSemList" :key="index">
          <div class="singlePerson">
            <a-icon type="close-circle" class="closeIcon" @click="delEditSem(index)" />
            <div class="tc">
              <img :src="item.HeadPortrait" class="userHeadImg" />
            </div>
            <p class="semText">
              Name
              <span class="t2">{{ item.User_Name }}</span>
            </p>
            <p class="semText">
              Department
              <span class="t2">{{ item.Department_Name }}</span>
            </p>
          </div>
        </div>
      </div>
      <img src="../../assets/img/index/semUpload.png" class="semUploadImg" @click="openSemPOp" />
    </div>

    <a-modal
      v-model="isOpenSemEdit"
      title="SME"
      @ok="doneSelectExpert "
      :width="880"
      @cancel="cancelEditPop"
    >
      <div class="editSemerPop">
        <a-menu style="width: 256px" mode="vertical" :default-selected-key="'[0]'">
          <a-menu-item
            v-for="(item, index) in DepartmentList"
            :key="index"
            @click="selectDepartment(item)"
          >{{ item.ModuleName }}</a-menu-item>
        </a-menu>
        <div class="flex editBody">
          <div
            v-for="(v,i ) in semInfoList"
            :key="i"
            @click="checkSemPerson(v,i)"
            :class="v.check?'transparent_block':''"
          >
            <div class="singlePerson transparent">
              <div class="tc">
                <img :src="v.HeadPortrait" class="userHeadImg" />
              </div>
              <p class="semText">
                Name
                <span class="t2">{{ v.User_Name }}</span>
              </p>
              <p class="semText">
                Department
                <span class="t2">{{ v.Department_Name }}</span>
              </p>
            </div>
          </div>
          <img
            src="../../assets/img/index/semUpload.png"
            class="semUploadImg"
            @click="openSingleEdit"
          />
        </div>
      </div>
    </a-modal>
    <!-- 编辑单个专家弹窗 -->
    <a-modal
      v-model="isOpenSingleEdit"
      title="SME"
      @ok="submitSingleEdit"
      :width="550"
      @cancel="closeSingleEditPop"
    >
      <div class="semBox">
        <div class="row" :key="imgKey">
          <label>Avatar:</label>
          <AvatarUpload @getAvatar="getAvatar"></AvatarUpload>
        </div>
        <div class="row">
          <label>Name:</label>
          <a-input v-model="User_Name" />
        </div>
        <div class="row">
          <label>Department:</label>
          <span>{{ stDepartment }}</span>
        </div>
        <div class="row">
          <label>Mail:</label>
          <a-input v-model="EMail" type="email" />
        </div>
        <p class="nextLine"></p>

        <div class="row">
          <label>Summary:</label>
          <a-textarea v-model="Summary" :rows="4" style="width:60%;" />
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import imgUpload from '@/components/upload/imgUpload'
import AvatarUpload from '@/components/upload/AvatarUpload'
import pc from '@/public/public.js'

export default {
  data() {
    return {
      isDoneSelectSem: false,
      isOpenSemEdit: false, //sem编辑弹窗
      isOpenSingleEdit: false,
      semInfoList: [],
      Summary: '',
      User_Name: '',
      HeadPortrait: '',
      Department: '',
      Department_ID: '',
      EMail: '',
      NTID: '',
      PhoneNum: '',
      Sex: '',
      editSemList: [],
      stDepartment: '',
      stDepartment_ID: '',
      hasChooseSemList: [],
      DepartmentList: [],
      imgKey: '',
      userIdList: []
    }
  },

  components: {
    imgUpload,
    AvatarUpload
  },
  created() {
    this.getSemInfo()
    this.editSemList = []
    this.semInfoList.map(item => {
      item.check = ''
      return item
    })
    if (this.stDepartment_ID) {
      this.getSemByDepartment(this.stDepartment_ID)
    }
  },
  watch: {
    isOpenSingleEdit() {
      if (!this.isOpenSingleEdit) {
        this.imgKey = Math.random()
      }
    },
    editSemList() {
      // console.log('this.editSemList :>> ', this.editSemList)
      this.userIdList = []
      this.editSemList.map(item => {
        this.userIdList.push(item.User_ID)
      })
      if (this.editSemList.length < 1) {
        this.semInfoList.forEach(item => {
          item.check = ''
        })
      }
    }
  },
  mounted() {},
  methods: {
    delEditSem(index) {
      // 倒序删除
      this.editSemList.splice(index, 1)
      if (this.editSemList.length === 1 && index === 0) {
        this.editSemList = []
      }
      this.semInfoList[index].check = ''
    },
    closeSingleEditPop() {
      this.isOpenSingleEdit = false
    },
    checkSemPerson(item, index) {
      if (!item.check) {
        item.check = true
        this.editSemList.push(item)
      } else {
        item.check = false
        this.editSemList.splice(index, 1)
        if (this.editSemList.length === 1 && index === 0) {
          this.editSemList = []
        }
      }
    },

    selectDepartment(item) {
      // console.log('item :>> ', item)
      this.stDepartment_ID = item.ModuleId
      this.stDepartment = item.ModuleName
      this.getSemByDepartment(this.stDepartment_ID)
    },
    // 查询单一部门sem
    getSemByDepartment(id) {
      const a = {
        method: 'User_Que',
        userId: window.userId || 1,
        sign: '19B39A0351B99062CCFDDE168E32D279',
        currentPage: 0,
        limit: 0,
        datas: {
          Department_ID: id
        }
      }
      this.$post(a).then(result => {
        // console.log('result.data :>> ', result.data)
        this.semInfoList = result.data
      })
    },
    getAvatar(e) {
      console.log('getAvatar :>> ', e)
      if (e) {
        this.HeadPortrait = e
      }
    },
    openSemPOp() {
      this.isOpenSemEdit = true
    },
    cancelEditPop() {
      this.isOpenSemEdit = false
      // this.editSemList = []
    },
    // 修改单个专家弹框
    openSingleEdit() {
      this.isOpenSingleEdit = true
    },
    doneSelectExpert() {
      this.isOpenSemEdit = false
      this.isDoneSelectSem = true
      this.$emit('getUserList', this.userIdList)
    },
    submitSingleEdit() {
      const a = {
        method: 'User_Add',
        userId: window.userId || 1,
        sign: '19B39A0351B99062CCFDDE168E32D279',
        currentPage: 0,
        limit: 0,
        datas: {
          User_Name: this.User_Name,
          User_Reallyname: this.User_Name,
          HeadPortrait: this.HeadPortrait,
          Department_ID: this.stDepartment_ID,
          EMail: this.EMail,
          Summary: this.Summary,
          NTID: this.NTID,
          PhoneNum: this.PhoneNum,
          Sex: this.Sex
        }
      }
      if (!this.User_Name) {
        this.$message.warning('The user name cannot be empty!')
        return
      } else if (!this.HeadPortrait) {
        this.$message.warning('Please upload your profile picture!')
        return
      } else if (!pc.checkEmail(this.EMail) && this.EMail) {
        this.$message.warning('The email number format is incorrect!')
        return
      }
      this.$post(a).then(result => {
        console.log('result.data :>> ', result.data)
        if (result.code === 0) {
          this.$message.success('Add Success!')
          this.getSemByDepartment(this.stDepartment_ID)
        }
      })
      this.isOpenSingleEdit = false
    },
    // 清空弹窗数据
    clearData() {},
    getSemInfo() {
      const a = {
        method: 'ShpModule_Que',
        userId: window.userId || 1,
        sign: 'A0251DD654CBB418AF1422CA880A1270',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        datas: {}
      }
      this.$post(a).then(result => {
        // console.log('result :>> ', result)
        this.DepartmentList = result.data
        this.stDepartment_ID = this.DepartmentList[0].ModuleId
        this.stDepartment = this.DepartmentList[0].ModuleName
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import url('SmeEdit.less');
</style>